<template>
  <div class="personnel-search">
    <el-form :model="searchForm" inline class="search-form">
      <el-form-item label="员工编号">
        <el-input
          v-model="searchForm.employeeId"
          placeholder="请输入员工编号"
          clearable
          style="width: 200px;"
        />
      </el-form-item>
      
      <el-form-item label="员工姓名">
        <el-input
          v-model="searchForm.employeeName"
          placeholder="请输入员工姓名"
          clearable
          style="width: 200px;"
        />
      </el-form-item>
      
      <el-form-item label="所属部门">
        <el-select
          v-model="searchForm.department"
          placeholder="请选择部门"
          clearable
          style="width: 150px;"
        >
          <el-option label="生产部" value="生产部" />
          <el-option label="质检部" value="质检部" />
          <el-option label="技术部" value="技术部" />
          <el-option label="管理部" value="管理部" />
        </el-select>
      </el-form-item>
      
      <el-form-item label="技能等级">
        <el-select
          v-model="searchForm.skillLevel"
          placeholder="请选择技能等级"
          clearable
          style="width: 150px;"
        >
          <el-option label="初级" value="初级" />
          <el-option label="中级" value="中级" />
          <el-option label="高级" value="高级" />
        </el-select>
      </el-form-item>
      
      <el-form-item label="状态">
        <el-select
          v-model="searchForm.status"
          placeholder="请选择状态"
          clearable
          style="width: 120px;"
        >
          <el-option label="在岗" value="在岗" />
          <el-option label="休假" value="休假" />
          <el-option label="离职" value="离职" />
          <el-option label="培训" value="培训" />
        </el-select>
      </el-form-item>
      
      <el-form-item>
        <el-button
          type="primary"
          :loading="loading"
          @click="handleSearch"
        >
          搜索
        </el-button>
        <el-button @click="handleReset">
          重置
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'

export default {
  name: 'PersonnelSearchComponent',
  props: {
    loading: {
      type: Boolean,
      default: false
    }
  },
  emits: ['search', 'reset'],
  setup(props, { emit }) {
    const searchForm = reactive({
      employeeId: '',
      employeeName: '',
      department: '',
      skillLevel: '',
      status: ''
    })

    const handleSearch = () => {
      // 过滤空值
      const searchParams = {}
      Object.keys(searchForm).forEach(key => {
        if (searchForm[key] !== '' && searchForm[key] !== null && searchForm[key] !== undefined) {
          searchParams[key] = searchForm[key]
        }
      })
      emit('search', searchParams)
    }

    const handleReset = () => {
      Object.keys(searchForm).forEach(key => {
        searchForm[key] = ''
      })
      emit('reset')
    }

    return {
      searchForm,
      handleSearch,
      handleReset
    }
  }
}
</script>

<style scoped>
.personnel-search {
  background-color: #f8f9fa;
  padding: 16px;
  border-radius: 4px;
  margin-bottom: 16px;
}

.search-form {
  margin: 0;
}

:deep(.el-form-item) {
  margin-bottom: 0;
  margin-right: 16px;
}

:deep(.el-form-item__label) {
  font-weight: 500;
  color: #606266;
}
</style>
